<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合实训图像项目</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  </style>
</head>

<body>
  <h1>综合实训图像项目</h1>
  <div>请输入目标图片分类：<input id="category_input" placeholder="例：ant"/></div>
  <div>请输入目标图片下标：<input id="index_input" placeholder="例：1"/></div>
  <button id="button">搜索相似图片</button>
  <script>
    const category = document.getElementById('category_input');
    const index = document.getElementById('index_input');
    const button = document.getElementById('button');
    function fixZero(s){
      s = s.trim();
      return '0'.repeat(4-s.length) + s;
    }
    button.addEventListener('click', () => {
      if(category.value === ''){
        window.alert('请输入分类');
        return;
      }
      if(index.value === ''){
        window.alert('请输入下标');
        return;
      }
      window.open(`http://127.0.0.1:5000/search?category=${category.value.trim()}&index=${Number(index.value)}`, '_blank');
    }, false);
  </script>
</body>

</html>